<template>
  <div>
    <div v-if="!visible" class="nav_right pc-nav-right">
      <el-tooltip
        v-for="nav in navRightData.iconList"
        :key="nav.id"
        placement="left"
        :show-arrow="false"
        :auto-close="3000"
        popper-class="popper"
      >
        <template #content>
          <div v-if="nav.id == 3" class="tooltip_size share">
            <div class="share_name">分享至:</div>
            <div class="share_type">
              <div class="share_type_item" @click="onClickShowQR">
                <span><i class="iconfont">&#xe6b8;</i></span>
                微信
              </div>
              <div class="share_type_item" @click="onClickWBShare">
                <span><i class="iconfont">&#xe6c3;</i></span>
                微博
              </div>
              <div class="share_type_item" @click="onClickQQShare">
                <span><i class="iconfont">&#xe69a;</i></span>
                QQ空间
              </div>
              <div class="share_type_item" @click="onClickCopyUrl">
                <span><i class="iconfont">&#xe6be;</i></span>
                复制链接
              </div>
            </div>
          </div>
          <div v-else class="tooltip_size" id="tooltip-item">{{ nav.text }}</div>
        </template>
        <div
          class="nav_right_item"
          :class="{ nav_right_item_active: nav.isActive }"
          @click="onClickNavRight(nav)"
        >
          <i :class="nav.iconClass" />
        </div>
      </el-tooltip>
    </div>
    <div v-if="visible" class="nav_right m-nav-right">
      <!-- 场景选择 -->
      <div
        class="nav_right_item"
        :class="{ nav_right_item_active: navRightData.iconList[0].isActive }"
        @click="onClickNavRight(navRightData.iconList[0])">
        <i :class="navRightData.iconList[0].iconClass" /> 
      </div>
      <!-- 全屏 -->
      <div
        class="nav_right_item"
        :class="{ nav_right_item_active: navRightData.iconList[1].isActive }"
        @click="onClickNavRight(navRightData.iconList[1])">
        <i :class="navRightData.iconList[1].iconClass" /> 
      </div>
      <!-- 分享 -->
      <el-tooltip
        placement="left"
        :show-arrow="false"
        :visible="tooltipShow"
      >
        <template #content>
          <div class="tooltip_size share">
            <div class="share_name">分享至:</div>
            <div class="share_type">
              <div class="share_type_item" @click="onClickShowQR">
                <span><i class="iconfont">&#xe6b8;</i></span>
                微信
              </div>
              <div class="share_type_item" @click="onClickWBShare">
                <span><i class="iconfont">&#xe6c3;</i></span>
                微博
              </div>
              <div class="share_type_item" @click="onClickQQShare">
                <span><i class="iconfont">&#xe69a;</i></span>
                QQ空间
              </div>
              <div class="share_type_item" @click="onClickCopyUrl">
                <span><i class="iconfont">&#xe6be;</i></span>
                复制链接
              </div>
            </div>
          </div>
        </template>
        <div
          class="nav_right_item"
          :class="{ nav_right_item_active: navRightData.iconList[2].isActive }"
          @click="onClickShare"
        >
          <i :class="navRightData.iconList[2].iconClass" />
        </div>
      </el-tooltip>
      <!-- 背景音乐 -->
      <div
        class="nav_right_item"
        :class="{ nav_right_item_active: navRightData.iconList[3].isActive }"
        @click="onClickNavRight(navRightData.iconList[3])">
        <i :class="navRightData.iconList[3].iconClass" />
      </div>
    </div>
        <!-- 分享弹窗 -->
    <!-- 微信二维码 -->
    <div class="weChatDialog shareDialog">
      <el-dialog
      :fullscreen="isFullScreen"
        destroy-on-close
        :close-on-click-modal="false"
        v-model="hospitalDialogData.wechartQRShow"
        :show-close="false"
        @close="handelDialogClose">
        <i class="close iconfont icon-guanbi" @click="closeShare"></i>
        <div class="title">扫码分享至微信</div>
        <div id="wechart_QR"></div>
      </el-dialog>
    </div>
    <!-- 复制链接 -->
    <div class="copyUrlDialog shareDialog">
      <el-dialog
        :fullscreen="isFullScreen"
        destroy-on-close
        :close-on-click-modal="false"
        v-model="copyUrlShow"
        :show-close="false"
        @close="handelDialogClose">
        <i class="close iconfont icon-cancel-1-copy" @click="closeShare"></i>
        <div class="title">复制链接</div>
        <p class="msg">链接已复制成功，可粘贴发送分享给他人</p>
        <p><span ref="num">5</span>秒后自动关闭该窗口</p>
      </el-dialog>
    </div>
    <!-- 背景音乐 -->
    <audio :src="curSceneData.bgsound" ref="audio" loop="true" autoplay></audio>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick, reactive } from 'vue'
import QRcode from 'qrcode2'
import { requestFullscreen, isFullscreenEnabled, exitFullscreen } from 'photo-sphere-viewer/src/utils/index'

const props = defineProps({
  curSceneData:Object
})
const curSceneData = ref(props.curSceneData)
let audio = ref(null)
let isPlaying = ref(true)
const encodeSearchParams = obj => {
  const params = []
  Object.keys(obj).forEach(key => {
    let value = obj[key]
    if (typeof value === 'undefined') {
      value = ''
    }
    if (escape(value).indexOf('%u') < 0) {
      params.push([key, value].join('='))
    } else {
      params.push([key, encodeURIComponent(value)].join('='))
    }
  })
  return params.join('&')
}

let visible = ref(false)
// 判断设备
const _isMobile = () => {
  let flag = navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|BlackBerry|IEMobile|MQQBrowser|JUC|Fennec|wOSBrowser|BrowserNG|WebOS|Symbian|Windows Phone)/i)
  return flag;
}
const navRightData = reactive({
  iconList: [
    { id: 1, iconClass: 'iconfont icon-yingyong nav_icon', text: '场景选择', isActive: true },
    { id: 2, iconClass: 'iconfont icon-quanping nav_icon', text: '全屏', isActive: false },
    { id: 3, iconClass: 'iconfont icon-fenxiangxiao nav_icon', text: '分享', isActive: false },
    { id: 4, iconClass: 'iconfont icon-yinle nav_icon', text: '背景音乐', isActive: true },
  ]
})

let tooltipShow = ref(false)
const onClickShare = () => {
  navRightData.iconList[2].isActive = !navRightData.iconList[2].isActive;
  tooltipShow.value = !tooltipShow.value;
}
const hospitalDialogData = reactive({
  hospitalInfo: {
    name: '',       // 医院名
    describe: '',   // 医院简介
    url: '',        // 医院官网地址
    img:{},
    address:{}, //医院地址
    add_url:'', //医院地图地址
    phone:[], //医院联系电话
  },
  longitude:null,
  latitude:null,
  wechartQRShow: false
})
// 点击分享到qq空间
const onClickQQShare = () => {
  tooltipShow.value = false;
  navRightData.iconList[2].isActive = false;
  const qqShareObj = {
    url: location.href, // 地址 （不能包含localhost）
    title: hospitalDialogData.hospitalInfo.name,      // 标题
    pics: hospitalDialogData.hospitalInfo.logo, // 图片地址
    summary: hospitalDialogData.hospitalInfo.describe.replace(/<[^>]+>/g,'').slice(0,50) + '...'
     // 描述信息
  }
  const qqShareBaseUrl = 'https://sns.qzone.qq.com/cgi-bin/qzshare/cgi_qzshare_onekey'
  let urlData = `${ qqShareBaseUrl }?${encodeSearchParams(qqShareObj) }`
  window.open(urlData)
}

// 点击分享到微博
const onClickWBShare = () => {
  tooltipShow.value = false;
  navRightData.iconList[2].isActive = false;
  const qqShareObj = {
    url: location.href, // 地址 （不能包含localhost）
    title: hospitalDialogData.hospitalInfo.name,      // 标题
    pic: hospitalDialogData.hospitalInfo.logo, // 图片地址
  }
  const wbShareBaseUrl = 'http://service.weibo.com/share/share.php'
  let urlData = `${ wbShareBaseUrl }?${encodeSearchParams(qqShareObj) }`
  window.open(urlData)
}

// 点击分享微信
const onClickShowQR = async () => {
  hospitalDialogData.wechartQRShow = true;
  await nextTick()
  new QRcode('wechart_QR', {
    width: 300,
    height: 300,
    text: location.href
  })
}
//关闭分享弹框
let timebar;
const closeShare = () => {
  hospitalDialogData.wechartQRShow = false;
  copyUrlShow.value = false;
  tooltipShow.value = false;
  navRightData.iconList[2].isActive = false;
  clearInterval(timebar)
}

//复制链接
let copyUrlShow = ref(false);
const num = ref(null);

const onClickCopyUrl = async() => {
  copyUrlShow.value = true;
  let url = location.href
  let _input = document.createElement('input'); // 直接构建input
  _input.value = url; // 设置内容
  document.body.appendChild(_input); // 添加临时实例
  _input.select(); // 选择实例内容
  document.execCommand('Copy'); // 执行复制
  document.body.removeChild(_input); // 删除临时实例
  await nextTick()
  timebar = setInterval(() => {
    if(num.value) {
      if(num.value.innerText == 0) {
        copyUrlShow.value = false;
        tooltipShow.value = false;
        navRightData.iconList[2].isActive = false;
        clearInterval(timebar)
      }else {
        num.value.innerText -= 1;
      }
    }
  }, 1000)
}
// 弹窗关闭触发
const handelDialogClose = () => {
  navBottomData.activeId = 0
}
const onClickNavRight = nav => {
  const { id } = nav
  if (id == 1) {
    nav.isActive = !nav.isActive
  } else if (id == 2) {
    nav.isActive = !nav.isActive
    const ele = document.body
    if (!isFullscreenEnabled(ele)) {
      // 未全屏
      requestFullscreen(document.body)
      nav.iconClass = 'iconfont icon-tuichuquanping nav_icon'
      return
    }
    exitFullscreen()
    nav.iconClass = 'iconfont icon-quanping nav_icon'
  } else if(id == 4) {
    nav.isActive = !nav.isActive
    if(isPlaying.value) {
      audio.value.pause()
    }else {
      audio.value.play()
    }
    isPlaying.value = !isPlaying.value;
  }
}

//获取医院官网
const getHospitalData = async () => {
    let res = {
      data: {"id":2,"name":"重庆市第七人民医院","describe":"<div style=\"text-indent: 2em; text-align: justify;\">重庆市第七人民医院位于重庆市主城南部巴南区李家沱长江之畔，紧邻南岸、九龙坡、大渡口，是一所政府主办的二级甲等综合医院，至今已有70余年历史。医院前身为国民政府内政部第二警察总队医院，于1949年4月创建于渝中区化龙桥；1949年12月，重庆解放后由人民政府接管，更名为重庆公安医院；1952年6月，交由重庆市卫生局管辖，更名为重庆市第四人民医院；1955年5月，迁址李家沱，更名为重庆市第三工人医院；1984年5月，经重庆市人民政府批准更现名为重庆市第七人民医院。1998年创建为国家二级甲等综合医院，2021年建成区域内首家&ldquo;互联网医院&rdquo;，2022年4月成为重庆理工大学附属中心医院。</div>\r\n<div style=\"text-indent: 2em; text-align: justify;\">医院现有职工1000余人，卫生专业技术人员700余人，其中高级职称近100人，硕士、博士研究生近100人。重庆市突出贡献中青年专家1人，重庆市名中医1人，重庆市、区学术技术带头人及后备人选9人，巴南区菁英人才5人。医院先后派出近百名技术骨干赴北京301医院、北京积水潭医院、四川华西医院及美国、德国、奥地利等国内外知名医院进修深造。2019年医院被评为&ldquo;巴南区人才工作示范基地&rdquo;。</div>\r\n<div style=\"text-indent: 2em; text-align: justify;\">医院占地面积近60亩，业务用房面积6万余平方米，编制床位1000张，设有临床、医技科室近30个，能满足日均1200人住院、2000人次门诊同时就医。医院诊疗设施设备先进，配备128排256层能谱螺旋CT、16排螺旋CT、1.5T多模态磁共振、数字减影血管造影机（DSA）、四维彩超、PCR仪、电视胸腔镜、电子腹腔镜、电子胃肠镜、电子支气管镜、关节镜、椎间孔镜、远程影像会诊系统等一大批成套的现代化诊疗设备，为临床诊治提供了有力保障。</div>\r\n<div style=\"text-indent: 2em; text-align: justify;\">医院承担了巴南、南岸、九龙坡、大渡口等地区200余万人口的医疗、预防和保健任务，年门诊人次近60万，住院人次4万余。拥有市、区级临床重点专科5个、市级特色专科1个，巴南区临床质量控制中心6个。2019年建成巴南区医学影像远程诊断中心，现已覆盖市内城口、秀山等边远山区近30家医疗单位。医院烧伤专业独具特色，是重庆市烧伤救治中心，为中华少年儿童慈善救助基金会天使妈妈基金在西南地区唯一定点医院。目前医院广泛开展微创手术、介入治疗、内镜诊治、显微手术等技术，医疗综合服务能力稳步上升。</div>\r\n<div style=\"text-indent: 2em; text-align: justify;\">医院2012年成为重庆市全科医师规范化培训基地，2016年创建成为重庆医科大学教学医院，2010年成为重庆理工大学药学与生物工程学院硕士培养点，2020年建成重庆市博士后科研工作站。近三年，科研立项31项，其中省部级4项，厅局级27项，发表论文879篇，SCI收录期刊10篇。</div>\r\n<div style=\"text-indent: 2em; text-align: justify;\">近年来，医院先后荣获&ldquo;全国巾帼文明岗&rdquo;、&ldquo;重庆市先进基层党组织&rdquo;、&ldquo;重庆市智慧医院&rdquo;、&ldquo;重庆市文明单位&rdquo;、&ldquo;重庆市卫生单位&rdquo;、&ldquo;重庆市青年文明号&rdquo;、&ldquo;巴南区诚信医院&rdquo;等荣誉称号。</div>\r\n<div style=\"text-indent: 2em; text-align: justify;\">重庆市第七人民医院已纳入巴南区 &ldquo;十四五&rdquo;创建三级甲等综合医院的规划。全院职工将继续践行&ldquo;全心全意为人民健康服务&rdquo;的医院核心价值观，遵循&ldquo;厚德致和、精医致远&rdquo;的院训，竭尽全力为广大百姓提供优质、安全、高效的医疗服务，诠释公立医院的公益性，力争建设成为环境一流、质量一流、服务一流、人文厚重的&ldquo;三甲&rdquo;医院，实现&ldquo;医院兴盛、员工幸福、医患和谐&rdquo;的愿景。</div>","url":"http://cq7y.foxtest.net/","address":{"name":"院本部","address":"巴南区李家沱工联一村一号","point":"106.554633,29.474371","telephone":""},"phone":["<p><span style=\"color: #ced4d9; font-size: 10pt;\">电话:<span style=\"color: #ffffff;\">023-62850631</span></span></p>\r\n<p><span style=\"color: #ced4d9; font-size: 10pt;\"><span style=\"color: #ffffff;\"><span style=\"color: #ced4d9;\">急诊电话:</span>023-62863014</span></span></p>\r\n<p><span style=\"color: #ced4d9; font-size: 10pt;\"><span style=\"color: #ffffff;\"><span style=\"color: #ced4d9;\">体检预约:</span>023-62857322 </span></span></p>"],"new_url":"http://cq7y.foxtest.net/news_yygg/","add_url":"http://cq7y.foxtest.net/hospital_navigation/","share_scipt":"//api.my120.org/static/api/js/share.js","img":{"logo":"http://cq7y.foxtest.net//static/images/logo/logo.png","favicon":"http://cq7y.foxtest.net//static/images/favicon.ico"}}
    }
    hospitalDialogData.hospitalInfo = res.data;
    hospitalDialogData.hospitalInfo.img = res.data.img;
    hospitalDialogData.hospitalInfo.phone = res.data.phone[0].replace(/style=\"(.*?)\"/g,'');
    let pointArr = res.data.address.point.split(",");
    hospitalDialogData.longitude = pointArr[0];
    hospitalDialogData.latitude = pointArr[1];

    var link = document.querySelector("link[rel*='icon']") || document.createElement('link');
    link.type = 'image/x-icon';
    link.rel = 'shortcut icon';
    link.href = hospitalDialogData.hospitalInfo.img.favicon;
    document.getElementsByTagName('head')[0].appendChild(link);
}
getHospitalData()

// 底部功能栏数据
const navBottomData = reactive({
  iconList: [
    { id: 1, iconClass: 'iconfont icon-jianjie nav_icon', text: '医院简介' },
    { id: 2, iconClass: 'iconfont icon-xinwen nav_icon', text: '医院新闻' },
    { id: 3, iconClass: 'iconfont icon-yisheng nav_icon', text: '专家介绍' },
    { id: 4, iconClass: 'iconfont icon-quanke- nav_icon', text: '科室导航' },
    { id: 5, iconClass: 'iconfont icon-jiaotongdaohang nav_icon', text: '联系我们' },
    { id: 6, iconClass: 'iconfont icon-home nav_icon', text: '医院官网' }, 
  ],
  activeId: 0,
})
const isFullScreen = ref(false);
const changeFullScreen = () => {
  let width = document.documentElement.clientWidth;
  if(width< 1024) {
    isFullScreen.value = true;     
  }else {
    isFullScreen.value = false;
  }
}
window.onload = () => {
  changeFullScreen()
}
window.addEventListener('resize', function() {
  changeFullScreen()
})

onMounted(() => {
  if(_isMobile()) {
    visible.value = true
  }else {
    visible.value = false;
  }
})

// 暴露方法
defineExpose({
  navRightData
})
</script>
<style scoped lang='scss'>
.nav_right {
  position: fixed;
  /* position: absolute; */
  right: 30px;
  top: 60px;
  /* bottom: 0; */
  z-index: 99;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.nav_right .nav_right_item {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: #f4f6fa;
  text-align: center;
  line-height: 48px;
  color: #1f73f2;
  margin-bottom: 25px;
}

.nav_right .nav_right_item:last-child {
  margin-bottom: 0;
}
.nav_right .nav_right_item_active {
  background-color: #1F73F2;
  color: #fff;
}
.nav_right .nav_right_item .nav_icon {
  font-size: 16px;
}
.tooltip_size {
  font-size: 14px;
}
.share .share_type .share_type_item {
  margin-bottom: 10px;
}
.share_type_item span {
  display: inline-block;
  height: 24px;
  width: 24px;
  border-radius: 50%;
  text-align: center;
  line-height: 24px;
  background-color:#555555;
}
.share_type_item span i {
  font-size: 17px;
}

.share .share_type .share_type_item:last-child {
  margin-bottom: 0;
}

.share .share_type .share_type_item:hover {
  cursor: pointer;
  color: #FCA203;
}

.share {
  min-height: 80px;
  display: flex;
  flex-direction: column;
}

.share .share_name {
  margin-bottom: 10px;
}


.shareDialog .title {
  text-align: center;
  color: #fff;
  font-family: Arial;
  font-size: 24px;
  line-height: 24px;
  margin-bottom: 36px;
  cursor: default
}
/* 分享 */
.shareDialog ::v-deep(.el-dialog)  {
  width: 100%;
  min-width: 375px;
}
.shareDialog ::v-deep(.el-dialog__body)  {
  padding: 0;
}
.shareDialog .title {
  font-size: 18px;
  line-height: 18px;
}
.copyUrlDialog p {
  color: #AAA;
  text-align: center;
  font-size: 14px;
  line-height: 14px;
  font-family: Arial;
}
.copyUrlDialog p span {
  color: #FCA203;
}
// .copyUrlDialog p.msg {
//   margin-top: calc(50vh - 100px);
// }
.copyUrlDialog p.msg {
  color: #fff;
  margin-bottom: 7px;
}
#wechart_QR ::v-deep(img)  {
  margin: calc(50vh - 200px) auto;
}
#wechart_QR ::v-deep(img)  {
  margin: auto;
}
/* 关闭弹框按钮 */
.close {
  font-size: 24px;
  color: #717378;
  position: absolute;
  right: 20px;
  top: 20px;
  cursor: pointer;
}
.close:hover {
  color: #1F73F2;
}
.sceneDialog ::v-deep(.el-dialog)  {
  background-color: rgba(0, 0, 0, 0.7);
  width: 1120px;
}
.sceneDialog ::v-deep(.el-dialog .el-dialog__header)  {
  padding: 0;
}
::v-deep(.el-dialog__header){
  border-bottom: none;
}
.sceneDialog ::v-deep(.el-dialog .el-dialog__body)  {
  padding: 0 0 80px;
  display: inline-block;
  width: 100%;
}
.shareDialog ::v-deep(.el-dialog)  {
  background-color: rgba(0, 0, 0, 0.7);
  width: 460px;
}
.shareDialog ::v-deep(.el-dialog__body){
  padding: 0 0 80px;
}
@media(any-hover:hover){
  .nav_right .nav_right_item:hover {
    cursor: pointer;
    background-color: #7abdff;
  }
}
.nav_right .nav_right_item:active {
  background-color: #1F73F2;
  color: #fff;
}
.nav_right .nav_right_item .nav_icon {
  font-size: 25px;
}
@media screen and (max-width: 1360px) and  (min-width: 1024px) {
  .nav-right .nav_right_item,
  .nav_right,
  .shareDialog ::v-deep(.el-dialog) 
  {
    transform: scale(0.8);
    transition:transform 0.3s linear;
  }

}
@media screen and (max-width: 1024px) {
  .nav_right {
   top: 100px;
  }
  .nav_right .nav_right_item {
    width: 30px;
    height: 30px;
    line-height: 30px;
    margin-bottom: 8px;
  }
  .nav_right .nav_right_item .nav_icon {
    font-size: 16px;
  }
}
</style>